<template>
  <div class="zuo">
    <div>
      <el-link target="_blank" class="jiantou"><</el-link>
      <el-link target="_blank" class="top">确认订单</el-link>
    </div>
    <div class="blue">
      <h1 class="red">￥{{ money.toFixed(2) }}</h1>
      <br>
      <br>
      <el-link class="huise" type="info">行程产生的高速、路桥、停车费全部给车主</el-link>
      <div class="white1">
        <van-cell title="高速费">
          <van-field
            placeholder="请输入金额"
            type="number"
            unit="元"
            v-model="fees.highwayFee"
          />
        </van-cell>
      </div>
      <div class="white2">
        <van-cell title="路桥费">
          <van-field
            placeholder="请输入金额"
            type="number"
            unit="元"
            v-model="fees.roadBridgeFee"
          />
        </van-cell>
      </div>
      <div class="white3">
        <van-cell title="停车费">
          <van-field
            placeholder="请输入金额"
            type="number"
            unit="元"
            v-model="fees.parkingFee"
          />
        </van-cell>
      </div>
      <div class="white4">
        <van-cell title="附加费">
          <van-field
            placeholder="请输入金额"
            type="number"
            unit="元"
            v-model="fees.additionalFee"
          />
        </van-cell>
      </div>
      <div class="blue2" @click="toendOrder">
        <van-button class="buttt">
          >>>>发起收款
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      driverInfo: {},
      rider: {},
      id: "", //订单编号
      carid: "", //车辆类型
      money: 0,
      fees: {
        highwayFee: null,
        roadBridgeFee: null,
        parkingFee: null,
        additionalFee: null
      },
      orders:{},
    };
  },
  methods: {
    // findOrders() {
    //
    //   axios.post(`/jiedan/riderQueue/findOrders?id=${this.id}`).then(res => {
    //     this.orders = res.data
    //   })
    // },
    calculateTotalFee() {
      return parseFloat(this.money) +
        Object.values(this.fees).reduce((total, fee) => total + parseFloat(fee), 0);
    },
    toendOrder() {
      const totalFee = this.calculateTotalFee();

      // 这里可以根据业务需求对总费用totalFee进行后续处理，比如传递给后端等
      console.log("总费用：", totalFee);
      sessionStorage.setItem("totalFee", JSON.stringify(totalFee));
      axios.post(`/jiedan/riderQueue/saveFees?highwayFee=${this.fees.highwayFee}&roadBridgeFee=${this.fees.roadBridgeFee}&parkingFee=${this.fees.parkingFee}&additionalFee=${this.fees.additionalFee}&id=${this.id}`).then(res => {
      })
      this.$router.push("/endOrder");
    },
    async findDriverByTel() {
      try {
        const tel = JSON.parse(localStorage.getItem('login'));
        const response = await axios.post('personal/personal/findByTel?tel=' + tel);
        this.driverInfo = response.data;
        return this.driverInfo;
      } catch (error) {
        console.error("查找司机信息出错：", error);
        // 可以根据具体情况进行进一步处理，比如显示错误提示给用户等
      }
    },
    async getRiderDataByCarId(carId, additionalParams = {}) {
      try {
        if (!carId) {
          console.error("车辆类型ID未提供，无法获取相关数据。");
          return;
        }

        let url = "";
        if (carId === 1) {
          url = `/jiedan/riderQueue/getOne?did=${this.driverInfo.id}`;
        } else if (carId === 2) {
          url = `/jiedan/riderQueue/getTwo?did=${this.driverInfo.id}`;
        } else if (carId === 3) {
          url = `/jiedan/riderQueue/getThree?did=${this.driverInfo.id}`;
        }

        // 添加额外的参数到URL中
        for (const key in additionalParams) {
          url += `&${key}=${additionalParams[key]}`;
        }

        const response = await axios.post(url);
        return response.data;
      } catch (error) {
        console.error(`根据车辆类型ID ${carId} 获取数据出错：`, error);
        // 可以根据具体情况进行进一步处理，比如显示错误提示给用户等
      }
    },
    async getList() {
      try {
        localStorage.setItem('endOrderdid', JSON.stringify(this.driverInfo.id))
        localStorage.setItem('endOrderid', JSON.stringify(this.id))
        const response = await axios.post(`/jiedan/riderQueue/getList?did=${this.driverInfo.id}&id=${this.id}`);
        this.money = response.data;
      } catch (error) {
        console.error("获取订单列表数据出错：", error);
        // 可以根据具体情况进行进一步处理，比如显示错误提示给用户等
        this.rider = {};
      }
    },
  },
  async created() {
    // 先获取id和carid的值
    this.id = sessionStorage.getItem("id");
    this.carid = sessionStorage.getItem("carid");
    // await this.findOrders();
    await this.findDriverByTel();

    // 根据carid的值获取相应的数据
    if (this.carid === "1") {
      await this.getRiderDataByCarId(1, {id: this.id});
    } else if (this.carid === "2") {
      await this.getRiderDataByCarId(2, {id: this.id});
    } else if (this.carid === "3") {
      await this.getRiderDataByCarId(3, {id: this.id});
    }

    await this.getList();
  },
};
</script>

<style scoped>
.jiantou {
  margin-left: 10px;
  font-size: 20px;
  margin-top: 5px;
}

.buttt {
  margin-left: 100px;
  background-color: #4EA9CB;
  border-color: #4EA9CB;
  color: white;
  font-size: 19px;
  margin-top: 16px;
}

.top {
  margin-left: 130px;
  font-size: 17px;
  margin-top: 10px;
}

.huise {
  margin-left: 50px;
}

.zuo {
  text-align: left;
}

.blue2 {
  width: 400px;
  height: 70px;
  background-color: #4EA9CB;
  margin-top: 180px;

}

.blue {
  margin-top: 60px;
  width: 400px;
  height: 660px;
  background-color: #F3FCFF;
  margin-top: -10px;
}

.red {
  text-align: center;
  color: red;
}

.white1 {
  margin-top: 20px;
  width: 400px;
  height: 70px;
  background-color: white;
}

.white2 {
  margin-top: 20px;
  width: 400px;
  height: 70px;
  background-color: white;
}

.white3 {
  margin-top: 20px;
  width: 400px;
  height: 70px;
  background-color: white;
}

.white4 {
  margin-top: 20px;
  width: 400px;
  height: 70px;
  background-color: white;
}

</style>
